import { Component, Vue, Watch } from 'vue-property-decorator';
import style from '@/styles/views/room-detail.module.less';
import viewsStyle from '@/styles/views/views.module.less';
import { EapLayout } from '@/components';
import {
  Button,
  Cell,
  CellGroup,
  Collapse,
  CollapseItem,
  DatetimePicker,
  Dialog,
  DropdownItem,
  DropdownMenu,
  Field,
  Icon,
  Loading,
  NavBar,
  NumberKeyboard,
  Overlay,
  Popup,
  PullRefresh,
  RadioGroup,
  Sidebar,
  SidebarItem,
  SwipeCell,
  Tab,
  Tabs
} from 'vant';
import openEnergySvg from '@/assets/open-energy.svg';
import closeEnergySvg from '@/assets/close-energy.svg';
import { IKeyValue, IResponse } from '@/interfaces/common.interface';
import roomSvg from '@/assets/room.svg';
import lightControlSvg from '@/assets/light-control.svg';
import acControlCloseSvg from '@/assets/ac-control-close.svg';
import acControlOpenSvg from '@/assets/ac-control-open.svg';
import illuSensorSvg from '@/assets/illu-sensor.svg';
import bodySensorSvg from '@/assets/body-sensor.svg';
import peopleSvg from '@/assets/people.svg';
import peopleDisabledSvg from '@/assets/people-disabled.svg';
import lightCloseSvg from '@/assets/close-light.svg';
import lightOpenSvg from '@/assets/open-light.svg';
import sensorSvg from '@/assets/sensor.svg';
import controlSvg from '@/assets/control.svg';
import { IDevice, IRoomDevice } from '@/interfaces/device.interface';
import { IAddDeviceResp, IRoom } from '@/interfaces/api.interface';
import _ from 'lodash';

const ROOM_DEVICE_TYPE = [
  'body-sensor',
  'ac-control',
  'light-control',
  'illu-sensor',
  'body-illu-sensor',
  'light-ac-control'
]; // 顺序不可变化

interface ITypeDevice extends IDevice {
  type: IDeviceType | '';
}

type IDeviceType =
  | 'light-control'
  | 'ac-control'
  | 'body-sensor'
  | 'illu-sensor'
  | 'body-illu-sensor'
  | 'light-ac-control';

Vue.use(Dialog);

@Component({
  components: {
    'eap-layout': EapLayout,
    'van-nav-bar': NavBar,
    'van-button': Button,
    'van-tabs': Tabs,
    'van-tab': Tab,
    'van-collapse': Collapse,
    'van-collapse-item': CollapseItem,
    'van-radio-group': RadioGroup,
    'van-cell-group': CellGroup,
    'van-cell': Cell,
    'van-overlay': Overlay,
    'van-pull-refresh': PullRefresh,
    'van-dropdown-menu': DropdownMenu,
    'van-dropdown-item': DropdownItem,
    'van-field': Field,
    'van-popup': Popup,
    'van-loading': Loading,
    'van-datetime-picker': DatetimePicker,
    'van-swipe-cell': SwipeCell,
    'van-sidebar': Sidebar,
    'van-sidebar-item': SidebarItem,
    'van-number-keyboard': NumberKeyboard,
    'van-icon': Icon
  },
  sockets: {
    connect() {
      // 说明是断线重连
      this.$socket.client.emit('init-room', this.$data.curRoom.id, (res: IResponse) => {
        if (res.result) {
          this.$store.commit('curRoom', res.data);
          this.$message.success(res.message);
          this.$forceUpdate();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 场景设备上线
    join(dev: IRoomDevice) {
      if (this.$store.state.curRoom.devids.includes(dev.devid)) {
        // 说明当前房间中存在该设备
        // this.$data.realTimeValue[dev.devid] = 0; // 暂存光照和温度设备的实时值
        this.$data.roomDeviceMap.set(dev.devid, dev);
        this.$data.realtime = +new Date();
        this.$forceUpdate();
      }
    },
    // 场景设备掉线
    lost(dev: IRoomDevice) {
      if (this.$store.state.curRoom.devids.includes(dev.devid)) {
        this.$data.roomDeviceMap.delete(dev.devid);
        this.$data.realtime = +new Date();
        this.$forceUpdate();
        this.$message.warning(`设备${dev.alias}丢失！`);
      }
    },
    add(data: { room_id: string; dev: IRoomDevice }) {
      if (this.$store.state.curRoom.id === data.room_id) {
        this.$store.commit('update', {
          curRoom: { ...this.$store.state.curRoom, devids: [...this.$store.state.curRoom.devids, data.dev.devid] }
        });
        this.$data.roomDeviceMap.set(data.dev.devid, data.dev);
        this.$data.realtime = +new Date();
        this.$forceUpdate();
      }
    },
    delete(dev: IRoomDevice) {
      if (this.$store.state.curRoom.devids.includes(dev.devid)) {
        this.$data.roomDeviceMap.delete(dev.devid);
        this.$data.realtime = +new Date();
        this.$forceUpdate();
      }
    },
    message(data: { devid: string; value: any; type: IDeviceType; c_type: IDeviceType }) {
      if (this.$store.state.curRoom.devids.includes(data.devid)) {    
        switch (data.type) {
          case 'ac-control':
          case 'body-sensor':
          case 'illu-sensor':
            this.$data.realTimeValue[data.devid] = data.value;
            break;
          case 'body-illu-sensor':
          case 'light-ac-control':
            if (!this.$data.realTimeValue[data.devid]) {
              this.$data.realTimeValue[data.devid] = {};
            }
            this.$data.realTimeValue[data.devid][data.c_type] = data.value;
            break;
          default:
            break;
        }
        if (data.type === 'illu-sensor' || data.c_type === 'illu-sensor') {
          const room = this.$store.state.curRoom;
          if (room) {
            this.$data.lightStatus = data.value > room.settings.illu;
          }
        }
        this.$forceUpdate();
      } 
    }
  }
})
export default class RoomDetail extends Vue {
  private roomDeviceMap: Map<string, IRoomDevice> = new Map([]);
  private realTimeValue: any = {}; // 简化结构直接使用一个属性来存储设备实时值
  private isSettingModel = false;
  private model = false;
  private isHomeReload = false;
  private roomSetting = {
    name: this.curRoom.name,
    illu: 30,
    ac_control_period: ['00:00', '23:59'],
    light_control_period: ['00:00', '23:59']
  };
  private timePickerModel: { show: boolean; type: 'ac_control_period' | 'light_control_period' } = {
    show: false,
    type: 'ac_control_period'
  };
  private typeDevidMap: Map<IDeviceType, string[]> = new Map([]);
  public realtime = '-'; // 用于触发房间设备统计
  private disabledRefresh = false;
  private devTypeIdx = 0;
  private typeDeviceNums = {
    'light-control': 0,
    'ac-control': 0,
    'body-sensor': 0,
    'illu-sensor': 0,
    'body-illu-sensor': 0,
    'light-ac-control': 0
  };
  private lightStatus = false;
  private switchLoading = false;

  private get curRoom(): IRoom {
    return this.$store.state.curRoom;
  }

  private get devices() {
    return this.$store.state.devices || [];
  }

  private get devType() {
    return ROOM_DEVICE_TYPE[this.devTypeIdx];
  }

  private get isManager() {
    const { managers, accountInfo } = this.$store.state;
    if (accountInfo.acoid) {
      return _.find(managers, { acoid: accountInfo.acoid });
    }
    return false;
  }

  private get roomDeviceStatus() {
    if (this.lightStatus) {
      return true;
    }
    for (const dev of this.roomDeviceMap.values()) {
      if (dev.type === 'ac-control' && this.realTimeValue[dev.devid]) {
        // 单空调控制
        return this.realTimeValue[dev.devid] === 'ON';
      }
      if (
        dev.type === 'light-ac-control' &&
        this.realTimeValue[dev.devid] &&
        this.realTimeValue[dev.devid]['ac-control']
      ) {
        // 复合空调控制
        return this.realTimeValue[dev.devid]['ac-control'] === 'ON';
      }
    }
    return false;
  }

  @Watch('realtime', { immediate: true })
  watchRealTime() {
    this.typeDevidMap.clear();
    this.typeDeviceNums = {
      'light-control': 0,
      'ac-control': 0,
      'body-sensor': 0,
      'illu-sensor': 0,
      'body-illu-sensor': 0,
      'light-ac-control': 0
    };
    [...this.roomDeviceMap.values()].forEach(dev => {
      if (dev.type) {
        const data = this.typeDevidMap.get(dev.type) || [];
        this.typeDevidMap.set(dev.type, [...new Set([...data, dev.devid])]);
        this.typeDeviceNums[dev.type] += 1;
      }
    });
    this.$forceUpdate();
  }

  public created() {
    this.$socket.client.emit('init-room', this.$route.query.room_id, (res: IResponse) => {
      if (res.result) {
        this.$store.commit('update', { curRoom: res.data });
      } else {
        this.$message.error(res.message);
      }
    });
  }

  public render() {
    return (
      <eap-layout>
        <van-nav-bar
          title={this.curRoom.name || '标题'}
          left-arrow
          slot='header'
          on-click-left={() => {
            this.$router.push({ name: 'room-list' });
          }}
        />
        <van-pull-refresh
          style={{ height: '100%' }}
          v-model={this.isHomeReload}
          disabled={this.disabledRefresh}
          loading-text='正在同步房间数据...'
          on-refresh={this.handleRefreshHome}>
          <div class={style['room']}>
            {this.renderRoomInfo()}
            <div style={{ display: 'flex', 'justify-content': 'space-between', margin: '12px' }}>
              <van-button
                color='#20a5df'
                icon='plus'
                disabled={!this.isManager}
                on-click={() => (this.model = true)}
                class={viewsStyle['touch']}
                style={{ flex: 1, marginRight: '8px' }}>
                添加
              </van-button>
              <van-button
                icon='setting-o'
                disabled={!this.isManager}
                class={viewsStyle['touch']}
                style={{ flex: 1 }}
                on-click={this.showSetting}>
                配置
              </van-button>
            </div>
            {this.renderRoomDevices()}
          </div>
        </van-pull-refresh>
        {this.renderDevModel()}
        {this.renderSettingModel()}
        {this.renderTimePicker()}
        <van-overlay
          show={this.switchLoading}
          style={{ display: 'flex', 'justify-content': 'center', 'align-items': 'center' }}>
          <van-loading size='24px' vertical color='#20a5df'>
            正在修改设备状态...
          </van-loading>
        </van-overlay>
      </eap-layout>
    );
  }

  private showSetting() {
    this.roomSetting = {
      name: this.curRoom.name,
      illu: this.curRoom.settings['illu'] || 0,
      ac_control_period: _.cloneDeep(this.curRoom.settings['ac_cp']),
      light_control_period: _.cloneDeep(this.curRoom.settings['light_cp'])
    };
    this.isSettingModel = true;
  }

  // 渲染房间目前总体信息
  private renderRoomInfo() {
    return (
      <div class={style['room-info']}>
        <div class={style['room-info-top']}>
          <div class={style['room-info-top-left']}>
            <img src={roomSvg} alt='room' />
          </div>
          <div class={style['room-info-top-right']}>
            <div>
              <span>空调控制：</span>
              <span
                class={
                  this.typeDeviceNums['ac-control'] + this.typeDeviceNums['light-ac-control'] &&
                  style['room-info-top-right-success']
                }>
                {this.typeDeviceNums['ac-control'] + this.typeDeviceNums['light-ac-control']}
              </span>
            </div>
            <div>
              <span>室内灯控：</span>
              <span
                class={
                  this.typeDeviceNums['light-ac-control'] + this.typeDeviceNums['light-control'] &&
                  style['room-info-top-right-success']
                }>
                {this.typeDeviceNums['light-ac-control'] + this.typeDeviceNums['light-control']}
              </span>
            </div>
            <div>
              <span>人体感应：</span>
              <span
                class={
                  this.typeDeviceNums['body-illu-sensor'] + this.typeDeviceNums['body-sensor'] &&
                  style['room-info-top-right-success']
                }>
                {this.typeDeviceNums['body-illu-sensor'] + this.typeDeviceNums['body-sensor']}
              </span>
            </div>
            <div>
              <span>光照感应：</span>
              <span
                class={
                  this.typeDeviceNums['body-illu-sensor'] + this.typeDeviceNums['illu-sensor'] &&
                  style['room-info-top-right-success']
                }>
                {this.typeDeviceNums['body-illu-sensor'] + this.typeDeviceNums['illu-sensor']}
              </span>
            </div>
          </div>
        </div>
        <div class={style['room-info-bottom']}>
          <van-button
            color={
              this.roomDeviceStatus
                ? 'linear-gradient(to right, #ff6034, #ee0a24)'
                : 'linear-gradient(to right, #3fe890, #07c160)'
            }
            class={viewsStyle['touch']}
            block
            on-click={this.switchAllRoomDevice}>
            {this.roomDeviceStatus ? '一键关闭' : '一键开启'}
          </van-button>
        </div>
      </div>
    );
  }

  private renderRoomDevices() {
    return (
      <div
        class={style['room-devices']}
        on={{
          touchstart: () => {
            this.disabledRefresh = true;
          },
          touchend: () => {
            this.disabledRefresh = false;
          }
        }}>
        <ul>
          {[...this.roomDeviceMap!.values()].map((item: IRoomDevice) => {
            const icon = this.getDeviceIcon(item);
            return (
              <van-swipe-cell>
                <li>
                  <img src={icon} alt='' srcset='' />
                  <div>
                    {item.alias}
                    {!item.status && <van-icon name='warn-o' size={24} color='#ff976a' />}
                    {item.status && (item.type === 'ac-control' || item.type === 'light-control') && (
                      <img
                        src={this.realTimeValue[item.devid] === 'ON' ? openEnergySvg : closeEnergySvg}
                        class={viewsStyle['touch']}
                        on-click={() => this.switchStatus(item)}
                      />
                    )}
                    {item.status && item.type === 'body-sensor' && (
                      <img src={this.realTimeValue[item.devid] === 'ON' ? peopleSvg : peopleDisabledSvg} />
                    )}
                    {item.status && item.type === 'illu-sensor' && <span>{this.realTimeValue[item.devid] || 0}</span>}
                    {item.status && item.type === 'body-illu-sensor' && (
                      <div style={{ display: 'flex', 'align-items': 'center' }}>
                        <img
                          src={
                            (this.realTimeValue[item.devid] as any)['body-sensor'] === 'ON'
                              ? peopleSvg
                              : peopleDisabledSvg
                          }
                        />
                        <span>{(this.realTimeValue[item.devid] as any)['illu-sensor'] || 0}</span>
                      </div>
                    )}
                    {item.status && item.type === 'light-ac-control' && (
                      <div>
                        <img
                          style={{ 'margin-right': '8px' }}
                          class={viewsStyle['touch']}
                          src={this.lightStatus ? lightOpenSvg : lightCloseSvg}
                          on-click={() => this.switchStatus(item, 'light-control')}
                        />
                        <img
                          src={
                            (this.realTimeValue[item.devid] as any)['ac-control'] === 'ON'
                              ? acControlOpenSvg
                              : acControlCloseSvg
                          }
                          class={viewsStyle['touch']}
                          on-click={() => this.switchStatus(item, 'ac-control')}
                        />
                      </div>
                    )}
                  </div>
                </li>
                {this.isManager && (
                  <template slot='right'>
                    <van-button type='danger' icon='delete-o' on-click={() => this.deleteDevice(item)} />
                  </template>
                )}
              </van-swipe-cell>
            );
          })}
        </ul>
      </div>
    );
  }

  private renderDevModel() {
    return (
      <van-dialog v-model={this.model} showConfirmButton={false} closeOnClickOverlay class={viewsStyle['model']}>
        <div slot='title' class={viewsStyle['model-title']}>
          <div class={viewsStyle['model-title-content']}>选择设备</div>
        </div>
        {this.renderSelectDevList()}
      </van-dialog>
    );
  }

  private renderSettingModel() {
    return (
      <van-dialog
        v-model={this.isSettingModel}
        title='房间设定'
        showConfirmButton={false}
        closeOnClickOverlay
        class={viewsStyle['model']}>
        {this.renderDeviceSetting()}
      </van-dialog>
    );
  }

  private renderDeviceSetting() {
    let ac_times = '';
    let light_times = '';
    const { ac_control_period, light_control_period } = this.roomSetting;
    const ac_start_times = ac_control_period[0].split(':');
    const ac_end_times = ac_control_period[1].split(':');
    if (
      Number(ac_end_times[0]) * 60 + Number(ac_end_times[1]) <
      Number(ac_start_times[0]) * 60 + Number(ac_start_times[1])
    ) {
      ac_times = `${this.roomSetting.ac_control_period[0]} - ${this.roomSetting.ac_control_period[1]}（次日）`;
    } else {
      ac_times = `${this.roomSetting.ac_control_period[0]} - ${this.roomSetting.ac_control_period[1]}`;
    }
    // 灯
    const light_start_times = light_control_period[0].split(':');
    const light_end_times = light_control_period[1].split(':');
    if (
      Number(light_end_times[0]) * 60 + Number(light_end_times[1]) <
      Number(light_start_times[0]) * 60 + Number(light_start_times[1])
    ) {
      light_times = `${this.roomSetting.light_control_period[0]} - ${this.roomSetting.light_control_period[1]}（次日）`;
    } else {
      light_times = `${this.roomSetting.light_control_period[0]} - ${this.roomSetting.light_control_period[1]}`;
    }
    return (
      <div class={viewsStyle['model-settings']}>
        <h5>重命名：</h5>
        <van-field v-model={this.roomSetting.name} placeholder='请输入场景名' />
        <h5>人体感应控制空调状态时间：</h5>
        <van-field
          value={ac_times}
          placeholder='请输入场景名'
          readonly
          clickable
          on-click={() => {
            this.timePickerModel = { show: true, type: 'ac_control_period' };
          }}
        />
        <h5>人体感应控制灯光状态时间：</h5>
        <van-field
          value={light_times}
          placeholder='请输入场景名'
          readonly
          clickable
          on-click={() => {
            this.timePickerModel = { show: true, type: 'light_control_period' };
          }}
        />
        <h5>房间光照临界值（小于为关闭状态）：</h5>
        <van-field type='digit' v-model={this.roomSetting.illu} placeholder='请输入光照临界值（数字）' />
        <div class={viewsStyle['model-btns']}>
          <van-button
            type='default'
            size='small'
            class={viewsStyle['touch']}
            on-click={() => {
              this.isSettingModel = false;
            }}>
            取消
          </van-button>
          <van-button color='#20a5df' class={viewsStyle['touch']} size='small' on-click={this.submitRoomSetting}>
            确定
          </van-button>
        </div>
      </div>
    );
  }

  private renderTimePicker() {
    return (
      <van-popup v-model={this.timePickerModel.show} position='bottom'>
        <div class={style['setting-model-time-picker']}>
          <van-datetime-picker
            v-model={this.roomSetting[this.timePickerModel.type][0]}
            safe-area-inset-bottom
            type='time'
            min-hour='0'
            max-hour='23'>
            <h5>选择起始时间</h5>
          </van-datetime-picker>
          <van-datetime-picker
            v-model={this.roomSetting[this.timePickerModel.type][1]}
            safe-area-inset-bottom
            type='time'
            min-hour='0'
            max-hour='23'>
            <h5>选择结束时间</h5>
          </van-datetime-picker>
        </div>
      </van-popup>
    );
  }

  private renderSelectDevList() {
    return (
      <div class={viewsStyle['model-content']}>
        <van-sidebar v-model={this.devTypeIdx}>
          <van-sidebar-item title='人体感应' badge={this.typeDeviceNums['body-sensor']} />
          <van-sidebar-item title='空调控制' badge={this.typeDeviceNums['ac-control']} />
          <van-sidebar-item title='灯光控制' badge={this.typeDeviceNums['light-control']} />
          <van-sidebar-item title='光照检测' badge={this.typeDeviceNums['illu-sensor']} />
          <van-sidebar-item title='人体光照' badge={this.typeDeviceNums['body-illu-sensor']} />
          <van-sidebar-item title='空调灯控' badge={this.typeDeviceNums['light-ac-control']} />
        </van-sidebar>
        <div class={viewsStyle['model-content-list']}>
          <van-cell-group>
            {this.devices.map((dev: IRoomDevice) => {
              if (dev.type === this.devType) {
                return (
                  <van-cell
                    title={dev.alias}
                    clickable
                    style={{ color: '#666' }}
                    on-click={() => {
                      this.selectDevice(dev);
                    }}>
                    {this.roomDeviceMap.has(dev.devid) && this.roomDeviceMap.get(dev.devid)!.status && (
                      <van-icon name='success' color='#07c160' size={24} slot='right-icon' />
                    )}
                    {this.roomDeviceMap.has(dev.devid) && !this.roomDeviceMap.get(dev.devid)!.status && (
                      <van-icon name='warn-o' color='#ff976a' size={24} slot='right-icon' />
                    )}
                  </van-cell>
                );
              }
            })}
          </van-cell-group>
        </div>
      </div>
    );
  }

  // 选择场景设备
  private async selectDevice(dev: IRoomDevice) {
    if (this.roomDeviceMap.has(dev.devid)) {
      return; // 选中设备为已选设备
    }
    if (!ROOM_DEVICE_TYPE.includes(dev.type)) {
      return this.$message.warning(`请选择符合的型号设备！`);
    }
    this.$socket.client.emit('add-device', { room_id: this.curRoom.id, devid: dev.devid }, (res: IAddDeviceResp) => {
      if (res.result) {
        this.$message.success(res.message);
      } else {
        this.$message.error(res.message);
      }
    });
    this.model = false;
  }

  private async deleteDevice(dev: IRoomDevice) {
    this.$socket.client.emit('delete-device', { room_id: this.curRoom.id, devid: dev.devid }, (res: IResponse) => {
      if (res.result) {
        this.$message.success(res.message);
      } else {
        this.$message.error(res.message);
      }
    });
  }

  private switchStatus(dev: IRoomDevice, type?: 'light-control' | 'ac-control') {
    if (dev.type === 'light-control') {
      // 灯光控制
      this.$socket.client.emit('send-device-message', dev.devid, { method: 'set', SW_ctrl: 'switch' });
      this.changeSwitchLoading();
    } else if (dev.type === 'ac-control') {
      // 空调控制
      this.$socket.client.emit('send-device-message', dev.devid, {
        method: 'set',
        ac: this.realTimeValue[dev.devid] === 'ON' ? 'OFF' : 'ON'
      });
    } else if (dev.type === 'light-ac-control') {
      if (type === 'light-control') {
        this.$socket.client.emit('send-device-message', dev.devid, { method: 'set', SW_ctrl: 'switch' });
        this.changeSwitchLoading();
      } else {
        this.$socket.client.emit('send-device-message', dev.devid, {
          method: 'set',
          ac: (this.realTimeValue[dev.devid] as any)['ac-control'] === 'ON' ? 'OFF' : 'ON'
        });
      }
    }
  }

  private handleRefreshHome() {
    let t: number | undefined = 0;
    t = setTimeout(() => {
      this.$message.error('同步数据失败, 请重试！');
    }, 5000);
    this.$socket.client.emit('init-room', this.curRoom.id, (res: IResponse) => {
      if (res.result) {
        this.$store.commit('curRoom', res.data);
        this.$message.success(res.message);
        this.isHomeReload = false;
        clearTimeout(t);
        t = undefined;
      } else {
        this.$message.error(res.message);
      }
    });
  }

  private getDeviceIcon(dev: IRoomDevice) {
    switch (dev.type) {
      case 'ac-control':
        return acControlCloseSvg;
      case 'body-sensor':
        return bodySensorSvg;
      case 'light-control':
        return lightControlSvg;
      case 'illu-sensor':
        return illuSensorSvg;
      case 'body-illu-sensor':
        return sensorSvg;
      case 'light-ac-control':
        return controlSvg;
      default:
        this.$message.warning('房间设备类型异常, 请退出重试！');
        return '';
    }
  }

  private submitRoomSetting() {
    this.$socket.client.emit(
      'change-room-setting',
      { room_id: this.curRoom.id, data: this.roomSetting },
      (res: IResponse) => {
        if (res.result) {
          this.$message.success(res.message);
          this.$store.commit('update', {
            curRoom: {
              ...this.curRoom,
              name: this.roomSetting.name,
              settings: {
                illu: this.roomSetting.illu, // 空调受控周期
                ac_cp: this.roomSetting.ac_control_period, // 空调受控周期
                light_cp: this.roomSetting.light_control_period // 灯控受控周期
              }
            }
          });
        } else {
          this.$message.error(res.message);
        }
      }
    );
    this.isSettingModel = false;
  }

  private switchAllRoomDevice() {
    this.$socket.client.emit(
      'switch-room-devices',
      { room_id: this.curRoom.id, status: !this.roomDeviceStatus },
      (res: IResponse) => {
        if (!res.result) {
          this.$message.error(res.message);
        }
      }
    );
    this.changeSwitchLoading();
  }

  private changeSwitchLoading() {
    this.switchLoading = true;
    setTimeout(() => {
      this.switchLoading = false;
    }, 6500);
  }
}
